<template>
  <div :class="{ headerBox: $route.path != '/home' ? true : false }">
    <div class="wrap headerWrap">
      <!-- logo -->
      <h1>
        <img
          src="@/assets/images/indexLogo.6f8ac4f0.png"
          alt=""
          v-if="$route.path == '/home'"
        />
        <img src="@/assets/images/slogan.7730f7f2.png" alt="" v-else />
      </h1>
      <!-- 导航:编程式路由，然后取路由跳转路径进行匹配是否一样，一样则添加active样式 -->
      <ul class="nav">
        <li
          v-for="(item, index) in navs"
          :key="index"
          @click="$router.push(item.topath)"
          :class="{ active: currentRoutePath == item.topath }"
        >
          {{ item.name }}
        </li>
      </ul>
      <!-- 搜索 -->
      <div class="search">
        <input
          type="text"
          placeholder="输入关键字"
          v-model.trim="searchKeyWord"
          @input="seachKeyWordFn"
        />
        <div
          class="searchbtn"
          @click="$router.push(`/goods?keyword=${searchKeyWord}`)"
        ></div>
      </div>
    </div>
  </div>
</template>

<script>
const navs = [
  {
    topath: "/home",
    name: "首页",
  },
  {
    topath: "/goods",
    name: "全部商品",
  },
  {
    topath: "/user",
    name: "个人中心",
  },
  {
    topath: "/order",
    name: "我的订单",
  },
  {
    topath: "/free",
    name: "专属福利",
  },
];

export default {
  name: "Header",
  data() {
    return {
      navs,
      currentRoutePath: "",
      searchKeyWord: "",
    };
  },
  // 监听路由路径，改变头部组件当前选中的按钮
  watch: {
    "$route.path": {
      handler(newVal, oldVal) {
        if (newVal == "/details" && oldVal != "/details") {
          this.currentRoutePath = oldVal;
        } else {
          this.currentRoutePath = this.$route.path;
        }
      },
    },
  },
  methods: {
    // 搜索框事件,当搜索框为空时,跳转到当前页面,显示全部商品
    seachKeyWordFn() {
      if (this.searchKeyWord == "") {
        this.$router.push(this.$route.path);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.headerWrap {
  display: flex;
  justify-content: space-between;
  height: 118px;
  align-items: center;
  font-size: 16px;
  font-family: SourceHanSansSC;
  font-weight: 500;

  .nav {
    height: 16px;
    display: flex;
    justify-content: space-between;
    width: 500px;
    padding-top: 10px;
    li {
      cursor: pointer;
      text-decoration: none;
      color: #242b39;

      &:hover a {
        color: #0a328e;
      }

      &.active {
        color: #0a328e;
      }
    }
  }

  .search {
    height: 40px;
    display: flex;
    justify-content: space-between;
    margin: auto 0;

    input {
      width: 214px;
      height: 40px;
      border: 1px solid #dedede;
      border-radius: 20px 0px 0px 20px;
      text-indent: 1em;
      box-sizing: border-box;
      font-size: 14px;
      font-family: SourceHanSansSC;
      font-weight: 300;
      color: #999999;
      outline: none;
    }
    .searchbtn {
      width: 50px;
      height: 40px;
      line-height: 40px;
      background: #0a328e url("@/assets/images/search.png") no-repeat 50% 50%;
      border-radius: 0px 20px 20px 0px;
      cursor: pointer;
    }
  }
}

.headerBox {
  background-color: rgb(36, 43, 57);
  .nav {
    li {
      color: #7d879a;

      &:hover a {
        color: #fff;
      }

      &.active {
        color: #fff;
      }
    }
  }
}
</style>